// 加载公共样式
require('../../assets/css/public.less')

// 引入自己样式
require('./home.less')

// 引入swiper的css
require('swiper/dist/css/swiper.min.css')

//引入tabbar渲染函数
const renderTabbar = require('../../lib/tabbar/tabbar')

// 引入swiper js
const mySwiper = require('swiper')

//获取axios工具函数
const request = require('../../lib/request/request.js')

// Swiper
window.onload = () => {

  //渲染tabbar
  renderTabbar('home')

  let mySwiper = new Swiper('.swiper-container', {
    autoplay: 5000,//可选选项，自动滑动
    loop: true,
    // 如果需要分页器
    pagination: '.swiper-pagination',
  })

  function $(selector) {
    return document.querySelector(selector)
  }
  function $a(selector) {
    return document.querySelectorAll(selector)
  }

  // 点击底部导航切换激活样式

  $a('.nav').forEach(function (v, i) {
    v.addEventListener('click', function () {
      $a('.iconfont').forEach(function (v1, i2) {
        // 清除所有样式
        v1.classList.remove('active')
        $a('.navText')[i2].classList.remove('active')
      })
      // 给当前添加样式
      $a('.iconfont')[i].classList.add('active')
      $a('.navText')[i].classList.add('active')
    })

  })

  // 获取打卡信息
  function getClockInfo() {
    request.get('/api/user/clockInInfo')
      .then(res => {
        console.log(res);
        // 解构数据
        let { data, errno } = res.data
        // 判断
        if (errno === 0) {
          console.log(data.isClockIn);
          if (data.isClockIn === true) {
            $('.dayCard').textContent = '今日已打卡'
            $('.dayCard').classList.add('locked')

          } else {
            $('.dayCard').textContent = '今日未打卡'
            $('.dayCard').classList.remove('locked')
          }
        }
      })
  }
  getClockInfo()

  //获取用户信息
  function getUserInfo() {
    request.get('/api/user/info')
      .then(res => {
        //1 解构数据
        let { errno, data } = res.data
        //2 判断
        if (errno === 0) {
          //3 处理业务逻辑
          render(data)
        }
      })
  }

  //渲染函数 渲染dom更新dom
  function render(data) {
    $('#rankNo').textContent = data.ranking
    $('#clockDay').textContent = data.clockCount
    $('#badge').textContent = data.badges
  }

  //初始化调用一次
  getUserInfo()

  // 点击打卡切换样式，并渲染数据
  $('.dayCard').addEventListener('click', () => {
    request.post('/api/user/clockIn')
      .then(res => {
        console.log(res);
        // 解构数据
        let { data, errno } = res.data
        // 判断
        if (errno === 0) {
          // 渲染数据
          getClockInfo()
          getUserInfo()
          alert('打卡成功')
        } else {
          alert(res.data.message)
        }
      })
  })

}








